<template>
  <div class="home">
     <transition :name="transitionName" mode="out-in">
        <router-view class="main-container"></router-view>
     </transition>
     <!-- header -->
    <mt-header fixed :title="titleName">
        <mt-button @click="showSidebar" slot="left">退出</mt-button>
    </mt-header>
    <!-- /header -->

    <!-- 侧边栏 -->
    <mt-popup v-model="popupVisible" position="left" class="mint-popup-3 addhover popuplist-container" :modal="true">
      <div v-for="(gs, index) in popupList" :key="index" @click="openPage(index)">
        <mt-cell :title="gs.name"  is-link >
          <img slot="icon" :src="gs.icon" width="24" height="24">
        </mt-cell>
      </div>
    </mt-popup>
     <!-- /侧边栏 -->
  </div>
</template>

<script>
import common from '../common/common';
export default {
  name: 'Home',
  mounted () {
    this.$navigation.on('forward', () => {
      this.transitionName = 'slide-left';
    });
    this.$navigation.on('back', () => {
      this.transitionName = 'slide-right';
    });
    this.$navigation.on('replace', () => {
      this.transitionName = 'fade';
    });
    this.$navigation.off('refresh', () => {
      this.transitionName = 'fade';
    });
    this.$navigation.on('reset', () => {
      this.transitionName = 'fade';
    });
    this.setSidebar();
  },
  data () {
    return {
      popupVisible: false,
      transitionName:'slide-left',
      sidebarlist:[]
    };
  },
  watch: {
    // getBack (back) {
    //   if(back) this.setSidebar();
    // }
  },
  computed: {
    titleName () {
      return this.$store.state.home.title;
    },
    getBack () {
      return this.$store.state.home.isBack;
    },
    popupList () {
      return this.$store.state.home.sidebarList;
    }
  },
  methods: {
    showSidebar () {
      // this.popupVisible = !this.popupVisible;
      this.$router.push('/logout');
    },
    openPage (i) {
      if(!this.popupList[i].url) return false;
      if(this.popupList[i].active == 'quit' ){
        return this.$router.push('/logout');
      }
      this.$router.push(this.popupList[i].url);
      this.popupVisible = false;
    },
    backHandle () {
      this.$router.back(-1);
    },
    setSidebar () {
      var extra = this.sidebarHandle();
      this.$store.commit('home/SET_SIDEBAR', {list:extra});
    },
    sidebarHandle () {
      this.sidebarlist = [];
      return [{name:'退出', url:'/login', icon:`${common.imagePath}/img/logout.png`, active:'quit'}];
    }
  }
};
</script>

<style scoped>
.main-container{
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  /* margin-top: 40px; */
}
.mint-cell.hover{
  background: #eee;
}
.mint-popup-3 {
  width: 70%;
  height: 100%;
  background-color: #fff;
  margin-top: 0px;
  text-align: left;
}

/* 页面转场动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}

.slide-left-enter, .slide-left-enter-active {
  animation-name: fadeInRight;
  animation-duration: .5s;
}

.slide-right-enter, .slide-right-enter-active{
  animation-name: fadeInLeft;
  animation-duration: .5s;
}
/* 页面转场动画 */

.popuplist-container{
  overflow-y: auto;
}

</style>
